<div class="popover" click-anywhere="$hide()" ignore-class="toggle-people-select">
    <div class="arrow"></div>
    <div class="popover-header">
        <span class="title">{{title && (title | translate) || ('GENERAL.TITLE.INVOLVE-PEOPLE' | translate)}}</span>

        <div class="actions">
            <a ng-click="$hide()" ng-show="!newTask.loading">
                {{'GENERAL.ACTION.CLOSE' | translate}}</a>
        </div>
    </div>

    <div class="popover-wrapper" ng-if="!popupModel.emailMode">

        <div class="form-group" ng-if="popupModel.formFields">
            <div class="col-xs-4">
                <label>{{'INVOLVE-PEOPLE.SOURCE.TYPE' | translate}}</label>
            </div>
            <div class="col-xs-8">
                <div class="btn-group btn-group-justified">
                  <div class="btn-group">
                    <button type="button" class="btn btn-default" ng-click="setSearchType()" ng-model="popupModel.userSourceType" ng-class="{'active' : (!popupModel.userSourceType || popupModel.userSourceType == 'search')}">{{'INVOLVE-PEOPLE.SOURCE.SEARCH-OPTION' | translate}}</button>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-default" ng-click="setFormFieldType()" ng-model="popupModel.userSourceType" ng-class="{'active' : popupModel.userSourceType == 'field'}">{{'INVOLVE-PEOPLE.SOURCE.FIELD-OPTION' | translate}}</button>
                  </div>
                </div>
            </div>
        </div>
        
        <div ng-if="popupModel.formFields" class="col-xs-12" style="margin-bottom:10px" />

        <div ng-show="(!popupModel.userSourceType || popupModel.userSourceType == 'search')">
            <div class="form-group">
                <input class="form-control" type="text" id="people-select-input" placeholder="{{ 'INVOLVE-PEOPLE.SEARCH-PLACEHOLDER' | translate }}" auto-focus
                       custom-keys up-pressed="previousUser()" down-pressed="nextUser()" enter-pressed="confirmUser()"
                       delayed-model="popupModel.filter" delay="200"/>
                <div class="subtle" translate="GENERAL.MESSAGE.SELECT-PEOPLE-HELP" style="padding: 5px 0 0 1px;"></div>
            </div>
            <h4>
                <!--<span translate="GENERAL.TITLE.RECENT-PEOPLE" ng-show="popupModel.showRecentResults"></span>-->
                <span translate="GENERAL.TITLE.MATCHING-PEOPLE" ng-if="!popupModel.showRecentResults"></span>
            </h4>
            <div class="people-select">
                <div class="no-results" ng-show="popupModel.userResults.length == 0">
                    <span>{{'INVOLVE-PEOPLE.NO-MATCHING-RESULTS' | translate}}</span>
                    <span class="people-select-link"
                          ng-click="$event.stopPropagation(); popupModel.emailMode = true"
                          ng-if="popupModel.emailDisabled == null || popupModel.emailDisabled == undefined || popupModel.emailDisabled == false">
                        {{'INVOLVE-PEOPLE.USE-EMAIL' | translate}}
                    </span>
                </div>
                <ul class="simple-list selectable pack" ng-show="popupModel.userResults.length > 0" scroll-to-active scroll-to-active-model="popupModel.selectedUser.id">
                    <li ng-click="confirmUser(user);" ng-repeat="user in popupModel.userResults"
                        ng-class="{'active': user.id === popupModel.selectedUser.id}">
                        <i class="icon icon-user"></i><span user-name="user"></span>
                    </li>
                </ul>
            </div>
        </div>
        
        <div ng-show="popupModel.userSourceType == 'field'" class="form-group clearfix">
            <div class="col-xs-4">
                <label>{{'PROCESS-BUILDER.PUBLISH-STEP.SOURCE.FORM-FIELD' | translate}}:</label>
            </div>
            <div class="col-xs-8">
                <div id="userFormField" variables-select include-type="false" expand-relative="true" field-type-filter="popupModel.userFieldFilter"
                       select-title="'FORM-BUILDER.MESSAGE.READONLY-TEXT-INSERT-FIELD'" fields="popupModel.formFields" selected-field="popupModel.userField" ignore-selection="true"></div>
            </div>
        </div>
        
    </div>

    <div class="popover-wrapper" ng-if="popupModel.emailMode && (popupModel.emailDisabled == null || popupModel.emailDisabled == undefined || popupModel.emailDisabled == false)">
        <form name="emailForm" class="form-group">
            <div class="people-select">
                <div class="input-group">
                    <input name="emailInput" class="form-control" type="email" placeholder="{{ 'INVOLVE-PEOPLE.EMAIL-PLACEHOLDER' | translate }}"
                           ng-model="popupModel.email"
                           custom-keys enter-pressed="selectPersonByEmail(!emailForm.emailInput.$error.email)"
                           auto-focus/>
                    <span class="input-group-btn">
                        <button class="btn btn-sm" type="button" ng-disabled="popupModel.email == null || popupModel.email == undefined || popupModel.email.length == 0 || emailForm.emailInput.$error.email"
                                ng-click="selectPersonByEmail(!emailForm.emailInput.$error.email)">{{'INVOLVE-PEOPLE.ACTION-SELECT' | translate}}</button>
                    </span>
                </div>
                <div class="subtle" translate="INVOLVE-PEOPLE.EMAIL-HELP" style="padding: 5px 0 0 1px;"></div>
                <div class="clearfix"></div>
                <div class="people-select-link" style="margin-top: 20px"
                     ng-click="$event.stopPropagation(); popupModel.emailMode = false">
                    <span ng-if="account.tenantId != null && account.tenantId != undefined" class="glyphicon glyphicon-search">&nbsp;</span>
                    <span ng-if="account.tenantId != null && account.tenantId != undefined" style="margin-left: -12px;">{{'INVOLVE-PEOPLE.BACK-TO-SEARCH' | translate}}</span>
                </div>
            </div>
        </form>
    </div>
</div>